<!--  -->
<template>
    <div v-show="isShow">
        <el-dialog :title="dialogTitle" :visible.sync="editVisible" width="60%">
            <div class="tree-box flex">
                <div class="flex-left">
                    <vxe-table
                        ref="xTable1"
                        border
                        :radio-config="{labelField: 'name', trigger: 'row',highlight: true}"
                        :data="data"
                        @radio-change="handleNodeClick"
                    >
                        <vxe-table-column type="radio" title width="40"></vxe-table-column>
                        <vxe-table-column field="description" title="科目属性"></vxe-table-column>
                    </vxe-table>
                </div>
                <div class="flex-right">
                    <vxe-table
                        border
                        :auto-resize="true"
                        keep-source
                        highlight-hover-row
                        highlight-hover-column
                        ref="xTree1"
                        :tree-config="treeConfig"
                        :radio-config="{labelField: 'name', trigger: 'row',highlight: true}"
                        :data="tableData"
                        @radio-change="currentChangeEvent"
                    >
                        <vxe-table-column type="radio" title  tree-node></vxe-table-column>
                        <vxe-table-column field="subCode" title="科目代码"></vxe-table-column>
                        <vxe-table-column field="subName" title="科目名称"></vxe-table-column>
                        <vxe-table-column field="drFlag" title="余额方向">
                            <template slot-scope="scope">{{scope.drFlag == 1?'借方':'贷方'}}</template>
                        </vxe-table-column>
                        <vxe-table-column field="prolossFlag" title="结转损益">
                            <template slot-scope="scope">{{scope.drFlag == 1?'自动转出':'不转出'}}</template>
                        </vxe-table-column>
                    </vxe-table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main.js';
var _ = require('lodash');
export default {
    props: {
        isShow: false,
        dialogTitle: ''
    },
    data() {
        return {
            editVisible: false,
            currentRow: '',
            //树数据
            data: [],
            treeConfig: {
                children: 'child',
                expandAll: true
            },
            //列表数据
            tableData: []
        };
    },
    methods: {
        //点击单选方法
        currentChangeEvent({ row }) {
            this.currentRow = row;
            console.log('currentChangeEvent', row);
        },
        // 获取树的数据
        getTree() {
            appMain
                .subjectCategoryFindAll()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.data = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
            //发送请求获取树数据
        },
        // 树元素点击事件
        handleNodeClick({ row }) {
            this.tableDataIndex = '';
            console.log(row, 'treeItem');
            // 获取右下表格数据tableData
            // this.tableData = e.jobs;
            this.subjectGetTreeByType(row.categoryId);
        },
        //根据科目属性获取科目列表
        subjectGetTreeByType(id) {
            appMain
                .subjectGetTreeByType({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.tableData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        close() {
            this.$emit('close', {
                showDialog: false
            });
        },
        // 从弹窗返回主页面的数据
        saveEdit() {
            //let item = this.tableDataIndex === '' ? {} : this.tableData[this.tableDataIndex];
            this.$emit('edit', { backData: this.currentRow, showDialog: false });
        }
    },
    watch: {
        isShow: function(newVal, oldVal) {
            //console.log(newVal, 'newVal');
            if (newVal == true) {
                this.editVisible = true;
                this.getTree();
            } else {
                //清空选中
                this.editVisible = false;
                this.$refs.xTree1.clearRadioRow();
                this.currentRow = {};
                this.tableData = [];
            }
        },
        editVisible: function(newVal) {
            this.$emit('close', {
                showDialog: newVal
            });
        },
        tableData: {
            //展开行
            handler: function() {
                for (const key in this.tableData) {
                    this.$refs.xTree1.setTreeExpand(this.tableData[key], true);
                }
            }
        }
    },
    computed: {},
    created() {}
};
</script>

<style lang="css" scoped>
.el-dialog__body {
    padding: 0 20px 30px;
}
.handle-input {
    width: 120px;
    display: inline-block;
}
.handle-select {
    width: 120px;
}
.tree-box {
    border: 1px solid #ddd;
    margin-top: 20px;
    min-height: 300px;
}
.flex-left {
    width: 200px;
    border-right: 1px solid #ddd;
}
.flex-right {
    flex: 1;
}
.el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
}
.el-tree > .el-tree-node {
    height: 300px;
    min-width: 100%;
    display: inline-block;
}
</style>